<template>
  <view class="signature-container">
    <view class="canvas-row">
      <!-- 左侧按钮竖排 -->
      <view class="signature-actions-vertical">
        <button class="action-btn clear-btn" @click="clearSignature">
          <text class="btn-text">清空</text>
        </button>
        <button class="action-btn undo-btn" @click="undoSignature">
          <text class="btn-text">撤销</text>
        </button>
        <button class="action-btn confirm-btn" @click="confirmSignature">
          <text class="btn-text">确认</text>
        </button>
      </view>
      <!-- 中间签名板 -->
      <view class="canvas-container">
        <canvas
          canvas-id="signatureCanvas"
          class="signature-canvas"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
        ></canvas>
      </view>
      <!-- 右侧提示 -->
      <view class="sign-tip-box">
        <text class="sign-tip-text-horizontal">请签名</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const ctx = ref(null)
const isDrawing = ref(false)
const lastPoint = ref({ x: 0, y: 0 })
const strokes = ref([]) // 记录所有笔画
const currentStroke = ref([])

onMounted(() => {
  ctx.value = uni.createCanvasContext('signatureCanvas')
  ctx.value.setStrokeStyle('#000')
  ctx.value.setLineWidth(4)
  ctx.value.setLineCap('round')
  ctx.value.setLineJoin('round')
  clearSignature()
})

function handleTouchStart(e) {
  const touch = e.touches[0]
  lastPoint.value = { x: touch.x, y: touch.y }
  isDrawing.value = true
  currentStroke.value = [lastPoint.value]
}

function handleTouchMove(e) {
  if (!isDrawing.value) return
  const touch = e.touches[0]
  const currentPoint = { x: touch.x, y: touch.y }
  ctx.value.beginPath()
  ctx.value.moveTo(lastPoint.value.x, lastPoint.value.y)
  ctx.value.lineTo(currentPoint.x, currentPoint.y)
  ctx.value.stroke()
  ctx.value.draw(true)
  lastPoint.value = currentPoint
  currentStroke.value.push(currentPoint)
}

function handleTouchEnd(e) {
  isDrawing.value = false
  if (currentStroke.value.length > 1) {
    strokes.value.push([...currentStroke.value])
  }
  currentStroke.value = []
}

function clearSignature() {
  ctx.value.clearRect(0, 0, 750, 300)
  ctx.value.draw()
  strokes.value = []
  currentStroke.value = []
}

function undoSignature() {
  if (strokes.value.length === 0) return
  strokes.value.pop()
  ctx.value.clearRect(0, 0, 750, 300)
  ctx.value.draw()
  // 重绘所有剩余笔画
  ctx.value.setStrokeStyle('#000')
  ctx.value.setLineWidth(4)
  ctx.value.setLineCap('round')
  ctx.value.setLineJoin('round')
  for (const stroke of strokes.value) {
    for (let i = 1; i < stroke.length; i++) {
      ctx.value.beginPath()
      ctx.value.moveTo(stroke[i - 1].x, stroke[i - 1].y)
      ctx.value.lineTo(stroke[i].x, stroke[i].y)
      ctx.value.stroke()
      ctx.value.draw(true)
    }
  }
}

function confirmSignature() {
  uni.canvasToTempFilePath({
    canvasId: 'signatureCanvas',
    success: (res) => {
      // 回传签名图片到上一个页面
      const eventChannel = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel?.()
      if (eventChannel && eventChannel.emit) {
        eventChannel.emit('signatureComplete', res.tempFilePath)
      }
      uni.navigateBack()
    },
    fail: () => {
      uni.showToast({ title: '签名保存失败', icon: 'error' })
    }
  })
}
</script>

<style scoped>
.signature-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.canvas-row {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  height: 100vh;
}
.signature-actions-vertical {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 10rpx;
}
.action-btn {
  width: 120rpx;
  height: 250rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.clear-btn {
  background-color: #ff6b6b;
  color: #fff;
}
.confirm-btn {
  background-color: #4ecdc4;
  color: #fff;
}
.undo-btn {
  background-color: #e0e0e0;
  color: #888;
}
.btn-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  transform: rotate(90deg);
}
.canvas-container {
  flex: 1;
  min-width: 400rpx;
  max-width: 600rpx;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signature-canvas {
  width: 100%;
  height: 90vh;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid #e0e0e0;
  touch-action: none;
}
.sign-tip-box {
  width: 120rpx;
  height: 100vh;
  background: #e0e0e0;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 24rpx;
}
.sign-tip-text-horizontal {
  color: #888;
  font-size: 32rpx;
  font-weight: bold;
  display: inline-block;
  transform: rotate(90deg);
  letter-spacing: 2rpx;
}
</style> 